<template>
  <form action="/">

      <div class="history">
        <h3>历史搜索</h3>
        <van-tag
          type="primary"
          size="large"
          color="#DCDCDC"
          v-for="(item, index) in this.$store.state.searchBox"
          :key="index"
          >{{ item.name }}</van-tag
        >
      </div>
      <div class="find">
        <h3>搜索发现</h3>
        <van-tag type="primary" size="large" color="#DCDCDC" v-for="(item,index) in list" :key="index">{{item}}</van-tag>
      </div>
  </form>
</template>

<script>
export default {
    data(){
        return {
            list:['麻辣烫','米线','披萨','蛋糕','汉堡','腊八粥','烤肉拌饭','炸鸡']
        }
    }
};
</script>

<style scoped>
.history {
  height: 200px;
  width: 100%;
}
.van-tag {
  display: inline-block;
  margin-right: 20px;
  margin-top: 20px;
}

.van-search  {
    display: inline-block;
    width: 330px;
}
</style>